<template>
  <div class="psyFm">
    <div class="scroll" ref="wrapper" :data="fmList">
      <div>
        <nav-list :navList="navList" @changeNav="changeList"></nav-list>
        <swiper :list="swiper" v-show="nid == 1"></swiper>
        <fm-list :fmList="fmList" :nid="Number(nid)"></fm-list>
        <div class="load" v-if="fmList.length > 10" v-show="!loading && !noData ">加载更多</div>
        <div class="load" v-show="loading && !noData">
          加载中...
        </div>
        <div class="load" v-if="noData">
          无更多内容
        </div>
      </div>
    </div>
    <waiting v-if="!fmList.length"></waiting>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import Swiper from 'components/swiper/swiper'
  import NavList from 'components/navList/navList'
  import FmList from './components/fmList'
  import Waiting from 'components/loading/loading'
  import { mapMutations} from 'vuex'

  export default {
    name: 'psyFm',
    data() {
      return {
        navList: [],
        swiper: [],
        offset: 0,
        pageSize: 10,
        nid: 1,
        fmList: [],
        loading: false,
        noData:false
      }
    },

    computed:{

    },

    mounted() {
      this.getPsyTestInfo()
      this.scroll = new Bscroll(this.$refs.wrapper, {
        data:this.fmList,
        click:true,
        pullUpLoad: {
          threshold: -70
        }
      })
      this.scroll.on("pullingUp", function () {
        this.loading = true
        let _this = this

        setTimeout(function () {
          _this.axios.all([_this.getFmList()]).then(_this.axios.spread((acct) => {
            if (acct.data) {
              _this.offset = _this.pageSize + _this.offset
              let newPage = acct.data.song_list
              if(newPage){
                _this.fmList = _this.fmList.concat(newPage)
                _this.changeFmList(_this.fmList)
              }else {
                 this.noData = true
              }

            }
          }))
          _this.$nextTick(function () {
            _this.loading = false
            _this.scroll.finishPullUp()
            _this.scroll.refresh()
          })
        }.bind(this), 700)
      }.bind(this))
    },

    methods: {
      ...mapMutations(['changeFmList']),
      getPsyTestInfo() {
        this.axios.all([this.getNav_Swiper(), this.getFmList()]).then(this.axios.spread((acct, perms) => {
          if (acct.data.ret) {
            this.offset = this.pageSize + this.offset
            this.swiper = acct.data.data.slider
            this.navList = acct.data.data.testNav
            this.fmList = perms.data.song_list
            this.changeFmList(this.fmList)

          }
        }))
      },

      changeList(id) {
        this.nid = id
        this.offset = 0
        this.fmList=[]
        this.noData =false
        this.axios.all([this.getFmList()]).then(this.axios.spread((acct) => {
          if (acct.data) {
            this.offset = this.pageSize + this.offset
            this.fmList = acct.data.song_list
            this.changeFmList(this.fmList)
          }
        }))
      },

      getNav_Swiper() {
        return this.axios.get('/api/psyFm.json')
      },
      getFmList() {
        let nid = this.nid
        let offset = this.offset
        let pageSize = this.pageSize
        return this.axios.get(`/v1/restserver/ting?format=json&method=baidu.ting.billboard.billList&type=${nid}&size=${pageSize}&offset=${offset}`)
      },
    },
    components: {
      NavList,
      Swiper,
      FmList,
      Waiting
    }
  }
</script>

<style scoped>

.scroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

}

.grp {
  padding: 20px 26px;
}

.load {
  height: 100px;
  width: 100%;
  text-align: center;
  font-size: 28px;
  color: #333;
}

</style>
